<template>
    <div>
      <div @click="dialogVisible = true">
        <slot name="register-btn"></slot>
      </div>
      <el-dialog
          :visible.sync="dialogVisible"
          :before-close="handleClose"
          :append-to-body="true"
          width="25%"
      >
        <el-form ref="registerForm" >
          <h3 class="register-title">Sigin Up</h3>
          <el-form-item label="账号" prop="username" >
            <el-input type="text" v-model="username"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="password"/>
          </el-form-item>
          <el-form-item label="确认密码" prop="password">
            <el-input type="password" v-model="passwordP"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="dialogVisible = false" v-on:click="quxiao">取 消</el-button>
          <el-button type="primary" :plain="true" @click="dialogVisible = false" v-on:click="queding">确 定</el-button>
        </div>
      </el-dialog>
    </div>
</template>

<script>
    export default {
      name: "Register",
      data(){
        return {
          dialogVisible: false,
          username: '',
          password: '',
          passwordP: ''
        }
      },
      created(){
        this.showRe();
      },
      computed: {
        show(){
          return this.$store.state.dialogVisible;
        }
      },
      methods: {
        showRe(){
          console.log(this.show);
          this.dialogVisible = this.show;
        },
        handleClose() {
          this.dialogVisible = false;
        },
        quxiao(){
          this.dialogVisible = false;
        },
        queding(){
          if(this.password === this.passwordP){
            this.$axios.post('user/register',null, {
               params: {
                 username: this.username,
                 password: this.password
               }
            }).then(res => {
              console.log(res);
              if(res.data.code != 200){
                console.log("注册失败");
              }else {
                console.log(res.data.msg);
                this.$router.push("/Mine");
                this.$message({
                  message: '注册成功',
                  type: 'success'
                });
              }
            });
          }else{
            this.dialogVisible = true;
            this.$message({
              message: "两次输入密码不一致",
              type: 'warning'
            });
          }
        }
      }
    }
</script>

<style scoped>
.register-title {
  text-align: center;
  margin: 0 auto 40px auto;
  font-size: 30px;
  font-weight: 400;
  color: #D6B3E3;
}
</style>
